<template>
  <div class="head-container">
    <!-- 新增 -->
    <el-form ref="queryForm" :inline="true" size="small" label-width="80px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="query.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="起止日期"
              class="form_input"/>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="query.endTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              class="form_input"/>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="卡号">
            <el-input v-model="query.cartNum" clearable placeholder="输入卡号" class="form_input"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="姓名">
            <el-input v-model="query.workerName" clearable placeholder="输入姓名"
                      class="form_input"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="部门">
            <treeselect v-model="query.deptId" :options="dict.deptTree" class="form_input" :defaultExpandLevel="9"
                        placeholder="选择部门"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-form-item label="职位">
            <el-select v-model="query.jobId" clearable placeholder="选择职位" class="form_input">
              <el-option v-for="item in dict.job" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="text-align: center">
        <el-button size="mini" type="primary" @click="toQuery">查找</el-button>
        <el-button size="mini" type="info" @click="toCancle">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import eForm from './form'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    components: {eForm,Treeselect},
    props: {
      query: {
        type: Object,
        required: true
      },
      dict: {
        type: Object,
        required: true
      },
      sup_this: {
        type: Object,
        default: null
      }
    },
    data() {
      return {}
    },
    methods: {
      toQuery() {
        this.sup_this.page = 0;
        this.sup_this.init()
      },
      toCancle(){
        this.query.startTime = '';
        this.query.endTime = '';
        this.query.cartNum = '';
        this.query.workerName = '';
        this.query.deptId = null;
        this.query.jobId = '';
      }
    }
  }
</script>
<style scope>
  .form_input {
    width: 220px;
  }

  .vue-treeselect__placeholder {
    line-height: 30.5px;
  }

  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 6px;
  }

  .el-input__inner {
    padding: 0 8px
  }

  .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
</style>
